<template>
  <div class="contarner-page" @click.stop="showLanguageHandel">
    <page-header ref="languageRef"></page-header>
    <main>
      <div class="title-content">
        <div class="container">
          <h1 class="title">Blog</h1>
          <h2 class="text">
            Rich and interesting TikTok blog posts, reading new things and new
            knowledge.
          </h2>
        </div>
      </div>
      <div class="container">
        <div class="blog-content">
          <div class="list-content">
            <div class="list-big">
              <nuxt-link :to="`/blog${bigObj.url}`">
                <div class="cover">
                  <img
                    :src="bigObj.imageUrl"
                    class="img"
                    :alt="bigObj.imageDescription"
                  />
                </div>
              </nuxt-link>
              <a @click.stop :href="`/blog/topics/${bigObj.type}`">
                <div class="cate shou">
                  {{ bigObj.type }}
                </div>
              </a>
              <nuxt-link :to="`/blog${bigObj.url}`">
                <h1 class="list-title shou">
                  {{ bigObj.articleTitle }}
                </h1>
              </nuxt-link>
              <div class="info flex_">
                <div class="info_1">by</div>
                <div class="info_2 shou">
                  <a @click.stop :href="`/blog/author${bigObj.authorUrl}`">
                    <div>{{ bigObj.author }}</div>
                  </a>
                </div>
                <div class="info_3"></div>
                <div class="info_4">{{ bigObj.updateTime }}</div>
              </div>
            </div>
            <div class="list flex_between">
              <div class="item shou" :key="k" v-for="(item, k) in dataList">
                <nuxt-link :to="`/blog${item.url}`">
                  <div class="cover">
                    <img
                      :src="item.imageUrl"
                      class="img"
                      :alt="item.imageDescription"
                    />
                  </div>
                </nuxt-link>
                <nuxt-link :to="`/blog/topics/${item.type}`">
                  <div class="cate">
                    {{ item.type }}
                  </div>
                </nuxt-link>
                <nuxt-link :to="`/blog${item.url}`">
                  <div class="list-title">
                    {{ item.articleTitle }}
                  </div>
                </nuxt-link>
                <div class="info flex_">
                  <div class="info_1">by</div>
                  <nuxt-link :to="`/blog/author${item.authorUrl}`">
                    <div class="info_2 shou">
                      {{ item.author }}
                    </div>
                  </nuxt-link>
                  <div class="info_3"></div>
                  <div class="info_4">{{ item.updateTime }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="pagination flex_center">
            <div class="fr page">
              <div class="sui-pagination clearfix">
                <ul class="flex_" style="">
                  <li
                    class="prev"
                    :class="{ disabled: pageNo === 1 }"
                    @click="pageNo > 1 ? getPageNo(pageNo - 1) : null"
                  >
                    <div class="left-active shou"></div>
                    <div class="left-disabled shou"></div>
                  </li>
                  <li
                    v-show="startNumAndEndNum.start > 1"
                    :class="{ active: pageNo === 1 }"
                    @click="getPageNo(1)"
                  >
                    <a>1</a>
                  </li>
                  <li class="dotted" v-show="startNumAndEndNum.start > 2">
                    <span>...</span>
                  </li>

                  <!-- 中间部分 -->
                  <li
                    v-for="(page, index) in pagesArr"
                    :key="index"
                    :class="{ active: pageNo === page }"
                    @click="getPageNo(page)"
                  >
                    <a>{{ page }}</a>
                  </li>

                  <li
                    class="dotted"
                    v-show="startNumAndEndNum.end < totalPage - 1"
                  >
                    <span>...</span>
                  </li>
                  <li
                    v-show="startNumAndEndNum.end < totalPage"
                    :class="{ active: pageNo === totalPage }"
                    @click="getPageNo(totalPage)"
                  >
                    <a>{{ totalPage }}</a>
                  </li>
                  <li
                    class="next"
                    :class="{ disabled: pageNo === totalPage }"
                    @click="pageNo < totalPage ? getPageNo(pageNo + 1) : null"
                  >
                    <div class="right-active shou"></div>
                    <div class="right-disabled shou"></div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div class="container">
        <div class="footer-content">
          <div class="footer-link">
            <div class="row flex_between">
              <div class="col-12">
                <div class="link-label fw700 c-000 f-21">Tools</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/instagram-story-download"
                      >Instagram Story Downloader</nuxt-link
                    >
                  </li>
                  <li>
                    <nuxt-link to="/instagram-reels-video-download"
                      >Instagram Reels Downloader</nuxt-link
                    >
                  </li>
                  <li>
                    <a href="https://savingtik.com/" target="_blank"
                      >Tiktok Downloader</a
                    >
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">Support</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/contact"> Contact </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/blog"> Blog </nuxt-link>
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">Legal</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/terms-of-service">
                      Terms of Service
                    </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/privacy-policy"> Privacy Policy </nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="copyright flex_ccenter">
            <b class="fw700 f-21 c-000"
              >We are not affiliated with Instagram or Meta</b
            >
            <div class="c-ccc f-16">
              © {{ new Date().getFullYear() }} Insta Downloader All rights
              reserved.
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>
        
        <script>
import { mapState, mapGetters, mapMutations } from "vuex";
import pageHeader from "~/components/page-header.vue";
import SuccessContent from "~/components/success-content.vue";
import CryptoJS from "crypto-js";
import { handleClick, checkString } from "@/plugins/Firebase.js";
import { encryptUrl, decryptUrl } from "~/utils/encryption";

export default {
  components: { pageHeader, SuccessContent },
  head() {
    return {
      title: "Blog - SavingInsta",
      script: this.myScript,
      meta: [
        {
          name: "description",
          content:
            "The Savinginsta blog channel has a wealth of Instagra tutorials, video downloads, and sharing of the best tools.",
        },
        {
          itemprop: "name",
          content: "Blog - SavingInsta",
        },
        { property: "og:locale", content: "en" },
        { name: "twitter:card", content: "summary" },
        { name: "twitter:title", content: "Blog - SavingInsta" },
        {
          name: "twitter:description",
          content:
            "The Savinginsta blog channel has a wealth of Instagra tutorials, video downloads, and sharing of the best tools.",
        },
        { name: "twitter:site", content: "SavingInsta" },
        { property: "og:title", content: "Blog - SavingInsta" },
        { property: "og:type", content: "article" },
        {
          property: "og:description",
          content:
            "The Savinginsta blog channel has a wealth of Instagra tutorials, video downloads, and sharing of the best tools.",
        },
        { property: "og:site_name", content: "SavingInsta" },
        { name: "google", content: "notranslate" },
      ],
      link: [
        {
          rel: "canonical",
          href: "https://savinginsta.com/blog",
        },
      ],
    };
  },
  data() {
    return {
      myTitle: "",
      myDescription: "",
      myScript: [],
      pageNo: 1,
      pageSize: 11,
      total: 0,
      continues: 4,
      dataList: [],
    };
  },
  async asyncData({ env }) {
    const pageSize = 11;
    const pageNo = 1;
    const encryptedData = encryptUrl(
      JSON.stringify({
        pageSize: pageSize,
        pageNo: pageNo,
        packageName: "WebIns",
      }),
      env
    );
    try {
      const response = await fetch(
        "https://savinginsta.com/js/a/api/cms/web/listData",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ condition: encryptedData }),
        }
      );

      // 确保响应状态是OK的
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const responseJson = await response.json();
      let data = JSON.parse(decryptUrl(responseJson.data, env));
      if (data.list.length == 0)
        return { dataList: [], bigObj: null, total: 0 };
      let Obj = data.list[0];
      data.list.shift();
      let dataList = data.list.map((x) => {
        let date = new Date(x.updateTime);
        let month = date.toLocaleString("en-US", { month: "short" });
        let day = date.getDate();
        let year = date.getFullYear();
        x.updateTime = `${month} ${day}, ${year}`;
        return x;
      });

      return { dataList: dataList, bigObj: Obj, total: data.count };
    } catch (error) {
      console.error(error);
      return { dataList: [], bigObj: {}, total: 0 };
    }
  },

  mounted() {},
  computed: {
    ...mapGetters(["language"]),
    currentObj() {
      return this.currentList[this.current];
    },
    current() {
      return this.list1.findIndex((x) => x == this.language);
    },
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    // 连续页码起始数字与结束数字
    startNumAndEndNum() {
      const { pageNo, continues, totalPage } = this;
      let start = 0;
      let end = 0;
      // 如果总页数少于连续页数
      if (totalPage < continues) {
        start = 1;
        end = totalPage;
      } else {
        start = pageNo - Math.floor(continues / 2);
        end = pageNo + Math.floor(continues / 2);
        // start出现0/负数
        if (start < 1) {
          start = 1;
          end = continues;
        }
        // end大于总页数
        if (end > totalPage) {
          start = totalPage - continues + 1;
          end = totalPage;
        }
      }
      return { start, end };
    },
    pagesArr() {
      let arr = [];
      // 连续页码个数
      arr.length =
        this.totalPage < this.continues ? this.totalPage : this.continues;
      // 第一个连续页码
      let pageNum = this.startNumAndEndNum.start;
      for (let i = 0; i < arr.length; i++) {
        arr[i] = pageNum;
        pageNum++;
      }
      return arr;
    },
  },
  methods: {
    getArticleList() {
      this.loading = true;
      let that = this;
      let result = this.encryptUrl(
        JSON.stringify({
          pageSize: that.pageSize,
          pageNo: that.pageNo,
          packageName: "WebIns",
        })
      );
      fetch("https://savinginsta.com/js/a/api/cms/web/listData", {
        method: "POST",
        body: JSON.stringify({
          condition: result,
        }),
        headers: {
          "Content-Type": "application/json",
        },
      }).then((response) => {
        response.json().then(async (data) => {
          this.loading = false;
          data = await this.decryptUrl(data.data);
          let res = JSON.parse(data);
          console.log(res);
          if (res.list.length == 0) return;
          if (res.list.length != 0) {
            res.list.forEach((x) => {
              let date = new Date(x.updateTime);
              let month = date.toLocaleString("en-US", { month: "short" });
              let day = date.getDate();
              let year = date.getFullYear();
              x.updateTime = month + " " + day + ", " + year;
            });
          }
          that.bigObj = res.list[0];
          // localStorage.setItem("bigObj", JSON.stringify(res.list[0]));
          res.list.shift();
          that.dataList = res.list;
          that.total = res.count;
        });
      });
    },
    encryptUrl(input) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
      let KEY_PWD = process.env.DES_CMS_KEY;
      try {
        const keyBytes = CryptoJS.enc.Utf8.parse(KEY_PWD);
        const inputBytes = CryptoJS.enc.Utf8.parse(input);
        const ivBytes = CryptoJS.lib.WordArray.random(IV_SIZE);
        const encrypted = CryptoJS.DES.encrypt(inputBytes, keyBytes, {
          iv: ivBytes,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        });
        const ciphertext = ivBytes.concat(encrypted.ciphertext);
        return ciphertext.toString();
      } catch (error) {
        console.error(error);
        return null;
      }
    },
    decryptUrl(cipherText) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
      let KEY_PWD = process.env.DES_CMS_KEY;
      try {
        let keyBytes = CryptoJS.enc.Utf8.parse(
          KEY_PWD.padEnd(CIPHER_ALGORITHM === "DES-CBC" ? 8 : 16)
        );
        let ivBytes = { iv: CryptoJS.enc.Hex.parse(process.env.DES_CMS_IV) }; // 如果使用CBC模式，需要一个初始化向量iv，这里是空向量
        let decrypted = CryptoJS.DES.decrypt(
          { ciphertext: CryptoJS.enc.Hex.parse(cipherText) },
          keyBytes,
          ivBytes
        );
        return decrypted.toString(CryptoJS.enc.Utf8);
      } catch (e) {
        console.error(e);
        return null;
      }
    },
    getPageNo(newPageNo) {
      this.pageNo = newPageNo;
      this.getArticleList();
      // 你也可以在这里加入更多的逻辑
      // 例如，你可能希望用新的页面编号来发送一个新的API请求
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
  },
};
</script>
<style lang="scss" scoped>
input::-webkit-calendar-picker-indicator {
  display: none !important;
}

main {
  .title-content {
    padding: 60px 0;
    border-bottom: 1px solid rgba(217, 217, 217, 0.15);
    background: linear-gradient(242deg, #ffbc68 0%, #ff4aaa 49%, #6b46ff 100%);
    color: #fff;
    .title {
      font-size: 56px;
      font-weight: 700;
    }
    .text {
      margin-top: 20px;
      font-size: 16px;
      font-weight: 700;
    }
  }
  .blog-content {
    color: #1d212c;
    flex: 1;

    .list-content {
      padding-top: 40px;
      .list-big {
        .cover {
          width: 100%;
          height: 400px;
          border-radius: 28px;
          overflow: hidden;
          .img {
            object-fit: cover;
            transition: transform 500ms;
          }
        }
        .cover:hover {
          .img {
            transform: scale(1.1);
          }
        }
        .cate {
          margin: 20px 0 20px;
          font-size: 18px;
          font-weight: 700;
          color: #ff3968;
        }
        .list-title {
          font-size: 36px;
          font-weight: 700;
        }
        .list-title:hover {
          text-decoration: underline;
        }
        .info {
          margin-top: 20px;
          font-size: 18px;
          .info_2 {
            color: #3129dd;
            margin-left: 6px;
          }
          .info_3 {
            width: 3px;
            height: 3px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            margin: 0 10px;
          }
          .info_4 {
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
      .list {
        padding: 60px 0;
        flex-wrap: wrap;
        align-items: stretch;
        .item {
          width: 47%;
          margin-bottom: 30px;
          .cover {
            overflow: hidden;
            width: 100%;
            height: 280px;
            border-radius: 16px;
            object-fit: cover;
            .img {
              object-fit: cover;
              transition: transform 500ms;
            }
          }
          .cover:hover {
            .img {
              transform: scale(1.1);
            }
          }
          .cate {
            margin: 18px 0;
            font-size: 18px;
            font-weight: 700;
            color: #ff3968;
          }
          .list-title {
            font-size: 28px;
            font-weight: 700;
          }
          .list-title:hover {
            text-decoration: underline;
          }
          .info {
            margin-top: 20px;
            font-size: 18px;
            .info_2 {
              color: #3129dd;
              margin-left: 6px;
            }
            .info_3 {
              width: 3px;
              height: 3px;
              background: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              margin: 0 10px;
            }
            .info_4 {
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
    .pagination {
      .left-active {
        margin-right: 20px;
        width: 26px !important;
        height: 26px !important;
        background-image: url("~static/images/prev-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .left-disabled {
        margin-right: 20px;
        width: 26px !important;
        height: 26px !important;
        background-image: url("~static/images/prev-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .right-active {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("~static/images/next-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .right-disabled {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("~static/images/next-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .page {
        display: flex;
        justify-content: center;
        overflow: hidden;

        .sui-pagination {
          margin: 18px 0;

          ul {
            margin-left: 0;
            margin-bottom: 0;

            li {
              line-height: 18px;
              display: inline-block;

              a {
                display: inline-block;
                width: 50px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 18px;
                color: #1d212c;
                cursor: pointer;
              }

              &.active {
                a {
                  color: #3129dd;
                  cursor: default;
                  font-weight: 700;
                }
              }

              &.prev {
                .left-active {
                  display: block !important;
                }
                .left-disabled {
                  display: none !important;
                }
                a {
                  margin-left: 0px;
                  background-color: #fafafa;
                }
              }

              &.disabled {
                .left-active {
                  display: none !important;
                }
                .left-disabled {
                  display: block !important;
                }
                .right-active {
                  display: none !important;
                }
                .right-disabled {
                  display: block !important;
                }
                a {
                  color: #999;
                  cursor: default;
                }
              }

              &.dotted {
                span {
                  width: 50px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.5);
                }
              }

              &.next {
                a {
                }
                .right-active {
                  display: block !important;
                }
                .right-disabled {
                  display: none !important;
                }
              }
              &.disabled {
                .right-active {
                  display: none !important;
                }
                .right-disabled {
                  display: block !important;
                }
              }
            }
          }

          div {
            color: #333;
            font-size: 14px;
            float: left;
            width: 80px;
          }
        }
      }
    }
  }
}
footer {
  background-color: #f7f6f9;
  .footer-content {
    padding: 50px 0 30px;
    .row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;

      .col-12 {
        flex: 0 0 auto;
        width: 33.33333333%;
      }
      .col-6 {
        flex: 0 0 auto;
        width: 33.33333333%;
      }
      .list-unstyled {
        margin-top: 20px;
        list-style: none;
        li {
          margin-bottom: 20px;
        }
        li:hover {
          color: #6f69e7;
        }
      }
    }
    .copyright {
      margin-top: 40px;

      div {
        margin-top: 8px;
      }
    }
  }
}
/* // 宽度小于992 */
@media (max-width: 992px) {
  main {
    .title-content {
      border-bottom: 1px solid rgba(217, 217, 217, 0.15);
      .title {
        font-size: 40px;
        font-weight: 700;
      }
      .text {
        margin-top: 20px;
        font-size: 14px;
      }
    }
    .container {
      padding: 0 14px;
      .list-content {
        padding-top: 40px;
        .list-big {
          .cover {
            width: 100%;
            height: 210px;
            border-radius: 16px;
            overflow: hidden;
            .img {
              object-fit: cover;
              transition: transform 500ms;
            }
          }
          .cover:hover {
            .img {
              transform: scale(1.1);
            }
          }
          .cate {
            margin: 14px 0 14px;
            font-size: 16px;
            font-weight: 700;
            color: #ff3968;
          }
          .list-title {
            font-size: 18px;
            font-weight: 700;
          }
          .list-title:hover {
            text-decoration: underline;
          }
          .info {
            margin-top: 14px;
            font-size: 16px;
            .info_2 {
              color: #3129dd;
              margin-left: 6px;
            }
            .info_3 {
              width: 3px;
              height: 3px;
              background: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              margin: 0 10px;
            }
            .info_4 {
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
        .list {
          padding: 30px 0;
          flex-wrap: wrap;
          align-items: stretch;
          .item {
            width: 100%;
            margin-bottom: 20px;
            .cover {
              overflow: hidden;
              width: 100%;
              height: 210px;
              border-radius: 16px;
              object-fit: cover;
              .img {
                object-fit: cover;
                transition: transform 500ms;
              }
            }
            .cover:hover {
              .img {
                transform: scale(1.1);
              }
            }
            .cate {
              margin: 14px 0;
              font-size: 16px;
              font-weight: 700;
              color: #ff3968;
            }
            .list-title {
              font-size: 18px;
              font-weight: 700;
            }
            .list-title:hover {
              text-decoration: underline;
            }
            .info {
              margin-top: 10px;
              font-size: 16px;
              .info_2 {
                color: #3129dd;
                margin-left: 6px;
              }
              .info_3 {
                width: 3px;
                height: 3px;
                background: rgba(255, 255, 255, 0.5);
                border-radius: 50%;
                margin: 0 10px;
              }
              .info_4 {
                color: rgba(255, 255, 255, 0.5);
              }
            }
          }
        }
      }
      .pagination {
        .left-active {
          margin-right: 14px;
          width: 20px !important;
          height: 20px !important;
          background-image: url("~static/images/prev-active.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
        .left-disabled {
          margin-right: 14px;

          width: 20px !important;
          height: 20px !important;
          background-image: url("~static/images/prev-disabled.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
        .right-active {
          margin-left: 14px;
          width: 20px !important;
          height: 20px !important;
          background-image: url("~static/images/next-active.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
        .right-disabled {
          margin-left: 14px;

          width: 26px !important;
          height: 26px !important;
          background-image: url("~static/images/next-disabled.webp");
          background-size: 26px 26px;
          background-repeat: no-repeat;
        }
        .page {
          display: flex;
          justify-content: center;
          overflow: hidden;

          .sui-pagination {
            margin: 18px 0;

            ul {
              margin-left: 0;
              margin-bottom: 0;

              li {
                line-height: 18px;
                display: inline-block;

                a {
                  display: inline-block;
                  width: 40px;
                  text-align: center;
                  font-size: 18px;
                  color: #1d212c;
                  cursor: pointer;
                }

                &.active {
                  a {
                    color: #3129dd;
                    cursor: default;
                    font-weight: 700;
                  }
                }

                &.prev {
                  .left-active {
                    display: block !important;
                  }
                  .left-disabled {
                    display: none !important;
                  }
                  a {
                    margin-left: 0px;
                    background-color: #fafafa;
                  }
                }

                &.disabled {
                  .left-active {
                    display: none !important;
                  }
                  .left-disabled {
                    display: block !important;
                  }
                  .right-active {
                    display: none !important;
                  }
                  .right-disabled {
                    display: block !important;
                  }
                  a {
                    color: #999;
                    cursor: default;
                  }
                }

                &.dotted {
                  span {
                    width: 50px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    font-size: 18px;
                    color: rgba(255, 255, 255, 0.5);
                  }
                }

                &.next {
                  a {
                  }
                  .right-active {
                    display: block !important;
                  }
                  .right-disabled {
                    display: none !important;
                  }
                }
                &.disabled {
                  .right-active {
                    display: none !important;
                  }
                  .right-disabled {
                    display: block !important;
                  }
                }
              }
            }

            div {
              color: #333;
              font-size: 14px;
              float: left;
              width: 80px;
            }
          }
        }
      }

      .app-box {
        display: flex;
        flex-direction: column !important;
        align-items: center;
        padding: 20px 16px;
        gap: 16px !important;
        border-radius: 12px;
        margin-top: 28px !important;
        background: linear-gradient(90deg, #e0e0fb 0%, #feeef2 100%);
        .app-box__info {
          text-align: center !important;
          p {
            margin-top: 10px;
            max-width: 500px;
          }
        }
        .app-link {
          display: flex;
          align-items: center;
          gap: 16px;
          a {
            img {
              height: 48px;
              width: auto;
            }
          }
        }
      }
      footer {
        background-color: #f7f6f9;
        .footer-content {
          padding: 50px 0 30px;
          .row {
            display: flex;
            flex-wrap: wrap;
            .col-12 {
              flex: 0 0 auto;
              width: 100%;
            }
            .col-6 {
              flex: 0 0 auto;
              width: 50%;
            }
            .list-unstyled {
              margin-top: 20px;
              list-style: none;
              li {
                margin-bottom: 20px;
              }
            }
          }
          .copyright {
            margin-top: 40px;
            font-size: 14px !important;
            div {
              margin-top: 8px;
              font-size: 14px !important;
            }
          }
        }
      }
    }
  }
  .f-21 {
    font-size: 14px !important;
  }
}
/* // 宽度小于768 */
@media (max-width: 768px) {
  .container {
    padding: 0 14px;
  }
  footer {
    background-color: #f7f6f9;
    .footer-content {
      padding: 50px 0 30px;
      .row {
        display: flex;
        flex-wrap: wrap;
        .col-12 {
          flex: 0 0 auto;
          width: 100%;
        }
        .col-6 {
          flex: 0 0 auto;
          width: 50%;
        }
        .list-unstyled {
          margin-top: 20px;
          list-style: none;
          li {
            margin-bottom: 20px;
          }
        }
      }
      .copyright {
        margin-top: 40px;
        font-size: 14px !important;
        div {
          margin-top: 8px;
          font-size: 14px !important;
        }
      }
    }
  }
}
</style>
        